import { ProTable } from '@ant-design/pro-components';
import { Modal, Rate, Select } from 'antd';
import React, { useState } from 'react';
import moment from 'moment';
import { useRequest } from 'umi';

const { Option } = Select;

export default () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [modalTitle, setModalTitle] = useState('学习计划');

  //获取 查看某计划的材料
  const getOtherMaterial = useRequest(
    (planId = null) => {
      return {
        url: `http://10.1.40.84:9998/stuTrain/getOtherMaterial?planId=${planId}`,
        method: 'GET',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
      };
    },
    {
      manual: true,
    },
  );
  //导师端——获取学生列表
  const getUnderStuList = useRequest((data = {}) => {
    let url = '';
    let count = 0;
    Object.keys(data).map((value: any, index: any) => {
      // console.log(value);
      let key_temp = value;
      let value_temp = data[value];
      if (data[value]) {
        if (count == 0) {
          url = url + '?' + key_temp + '=' + value_temp;
        } else {
          url = url + '&' + key_temp + '=' + value_temp;
        }
        count++;
      }
    });
    return {
      url: `http://10.1.40.84:9998/stuTrain/getUnderStuList` + url,
      method: 'GET',
      headers: {
        Authorization: localStorage.getItem('token') || '',
      },
    };
  });
  const showModal = () => {
    setIsModalVisible(true);
  };
  const handleOk = () => {
    setIsModalVisible(false);
  };
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const columns = [
    {
      title: '学生学号',
      dataIndex: 'account',
      key: 'account',
      hideInSearch: true,
    },
    {
      title: '学生姓名',
      dataIndex: 'stuName',
      key: 'stuName',
      // hideInSearch: true,
    },

    {
      title: '培养阶段',
      dataIndex: 'stageName',
      key: 'stageName',
      renderFormItem: () => {
        return (
          <Select
            showSearch
            filterOption={(input, option) =>
              (option!.children as unknown as string)
                .toLowerCase()
                .includes(input.toLowerCase())
            }
          >
            <Option value={'文献阅读'}>文献阅读 </Option>
            <Option value={'选题阶段'}>选题阶段 </Option>
            <Option value={'中期阶段'}>中期阶段 </Option>
            <Option value={'预答辩阶段'}>预答辩阶段 </Option>
            <Option value={'毕业答辩阶段'}>毕业答辩阶段 </Option>
          </Select>
        );
      },
    },
    {
      title: '研究方向',
      dataIndex: 'resDirection',
      key: 'resDirection',
      hideInSearch: true,
    },
    {
      title: '导师名称',
      dataIndex: 'teaName',
      key: 'teaName',
      hideInSearch: true,
    },
  ];
  const expandedRowRender = (record: any) => {
    return (
      <ProTable
        columns={[
          {
            title: '学习计划名称',
            dataIndex: 'planName',
            key: 'planName',
          },
          {
            title: '学习计划所属阶段',
            dataIndex: '学习计划所属阶段',
            key: '学习计划所属阶段',
          },
          {
            title: '学习计划起始时间',
            dataIndex: 'startTime',
            key: 'startTime',
            render: (text: any) => moment(text).format('YYYY-MM-DD'),
          },
          {
            title: '学习计划终止时间',
            dataIndex: 'endTime',
            key: 'endTime',
            render: (text: any) => moment(text).format('YYYY-MM-DD'),
          },
          {
            title: '操作',
            key: 'operation',
            valueType: 'option',
            render: (text: any, record1: any) => [
              <a
                key="Pause"
                onClick={() => {
                  getOtherMaterial.run(record1.planId).then((e) => {
                    console.log(e);
                    setModalTitle(
                      record1.planName +
                        '(' +
                        moment(record1.startTime).format('YYYY-MM-DD') +
                        '至' +
                        moment(record1.endTime).format('YYYY-MM-DD') +
                        ')',
                    );
                    setIsModalVisible(true);
                  });
                }}
              >
                查看
              </a>,
              ,
            ],
          },
        ]}
        rowKey="planId"
        headerTitle={false}
        search={false}
        options={false}
        dataSource={record.planList}
        pagination={false}
        bordered
      />
    );
  };
  const modalColumns = [
    {
      title: '材料名称',
      dataIndex: 'materialName',
      key: 'materialName',
      render: (text: any, record: any) => (
        <a
          onClick={() => {
            window.open(record.materialContent);
          }}
        >
          {text}
        </a>
      ),
    },
    {
      title: '研究方向',
      dataIndex: 'resDirection',
      key: 'resDirection',
    },
    {
      title: '材料类型',
      dataIndex: 'materialType',
      key: 'materialType',
    },
    {
      title: '材料平均分',
      dataIndex: 'avgScore',
      key: 'avgScore',
      render: (text: any, record: any) => (
        <Rate allowHalf defaultValue={record.avgScore || 0} disabled />
      ),
    },
  ];
  return (
    <>
      <ProTable
        columns={columns}
        dataSource={getUnderStuList.data}
        rowKey="id"
        pagination={{
          showQuickJumper: true,
        }}
        expandable={{
          expandedRowRender: (record: any) => expandedRowRender(record),
        }}
        // search={false}
        dateFormatter="string"
        headerTitle="学生列表"
        options={false}
        onSubmit={(e) => getUnderStuList.run(e)}
        onReset={() => getUnderStuList.run()}
      />

      <Modal
        width={800}
        title={modalTitle}
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        destroyOnClose
      >
        <ProTable
          size="small"
          columns={modalColumns}
          search={false}
          dataSource={getOtherMaterial?.data || []}
          rowKey="id"
          pagination={{
            showQuickJumper: true,
            hideOnSinglePage: true,
            pageSize: 10,
          }}
          bordered
          dateFormatter="string"
          // headerTitle="列表"
          options={false}
        />
      </Modal>
    </>
  );
};
